import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
import { PatternLoad, PatternPreview } from '@wingsuit-designsystem/storybook';

<PatternLoad patternId="grid">
  {(pattern) => (
  <>
    <Title />
    <Subtitle />

## Simple usage

```twig dark
  {% set cells = [
    'Cell 1',
    'Cell 2'
  ] %}
  {% include "@organisms/grid/grid.twig" with {
    attributes: create_attribute(),
    cells: cells,
    columns: 2,
    columns_width: 'equal',
    gutter: 'default'
  } only %}
`} />
```

## Cells
The pattern loops through a list of cells and print each cell.<br/>
To adjust the way the blocks are printed use twig blocks.

## Blocks
* cell_outer: <br/>Use block cell_outer to adjust the markup of each cell. Variables: `cell`, `cell_counter`.
* cell_inner:<br/>Use block cell_inner to print the cell variable. Variables: `cell`, `cell_counter`
### Example: cell_inner
```twig dark
  {% set cells = [
        {content: '<div class="w-full h-20 bg-green-500">1</div>'},
        {content: '<div class="w-full h-20 bg-green-500">2</div>'},
        {content: '<div class="w-full h-20 bg-green-500">3</div>'},
        {content: '<div class="w-full h-20 bg-green-500">4</div>'},
        {content: '<div class="w-full h-20 bg-green-500">5</div>'},
        {content: '<div class="w-full h-20 bg-green-500">6</div>'},
      ] %}
      {% embed "@organisms/grid/grid.twig" with {
        attributes: create_attribute(),
        cells: cells,
        columns: 2,
        columns_width: 'equal',
        gutter: 'default'
      } only %}
        {% block cell_inner %}
          {{ cell.content }}
        {% endblock %}
      {% endembed %}
```

### Example: cell_outer
```twig dark
  {% set cells = [
        {content: '<div class="w-full h-20 bg-green-500">1</div>'},
        {content: '<div class="w-full h-20 bg-green-500">2</div>'},
        {content: '<div class="w-full h-20 bg-green-500">3</div>'},
        {content: '<div class="w-full h-20 bg-green-500">4</div>'},
        {content: '<div class="w-full h-20 bg-green-500">5</div>'},
        {content: '<div class="w-full h-20 bg-green-500">6</div>'},
      ] %}
      {% embed "@organisms/grid/grid.twig" with {
        attributes: create_attribute(),
        cells: cells,
        columns: 2,
        columns_width: 'equal',
        gutter: 'default'
      } only %}
      {% block cell_outer %}
        <div>
        {{ cell.content }} + { cell_counter }
        </div>
      {% endblock %}
      {% endembed %}
```

## Column widths
The pattern comes with most common column widths configurations like 50x50 or 33x66.
If you need additional configuration you can extends the columns configuration inside the `grid.wingsuit.yml`.

```yaml dark
columns:
2: << Columns count
  equal: 'grid-cols-1 md:grid-cols-2' << Column width 50x50
  '66x33': 'grid-cols-1 md:grid-cols-66/33' << Column width 66x33
  '33x66': 'grid-cols-1 md:grid-cols-33/66' << Column width 33x66
```

## Gutter
To configure the spacing between the columns use the gutter configuration in the grid.wingsuit.yml.
```yaml dark
  gutter:
    ...
    default: 'gap-4 md:gap-5 lg:gap-7'
    ...
```

## Examples
### 4 equal columns.
```twig dark
  {% include "@organisms/grid/grid.twig" with {
    cells: cells,
    columns: 4,
    columns_width: 'equal',
    gutter: 'default'
  } only %}
```

<PatternPreview variant={pattern.getDefaultVariant()} columns="4" config="equal"/>

### 3 Columns with 25% 50% 25%.

```twig dark
 {% include "@organisms/grid/grid.twig" with {
   cells: cells,
   columns: 3,
   columns_width: '25x50x25',
   gutter: 'default'
 } only %}
```

<PatternPreview variant={pattern.getDefaultVariant()} columns="3" columns_width="25x50x25"/>

  </>
  )}
</PatternLoad>
